<% layout('/layouts/default.html', {title: '车型管理', libs: ['validate']}){ %>
<div class="main-content">
    <div class="box box-main">
        <div class="box-header with-border">
            <div class="box-title">
                <i class="fa icon-note"></i> ${text(carType.isNewRecord ? '新增车型' : '编辑车型')}
            </div>
            <div class="box-tools pull-right hide">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div>
        </div>
        <#form:form id="inputForm" model="${carType}" action="${ctx}/car/carType/save" method="post" class="form-horizontal">
        <div class="box-body">
            <div class="form-unit">${text('基本信息')}</div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-sm-4" title="">
                            <span class="required ">*</span> ${text('车型名称')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-8">
                            <#form:input path="treeName" maxlength="200" class="form-control required"/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-sm-4" title="">
                            <span class="required ">*</span> ${text('归属大类')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-8">
                            <#form:select path="bigType" dictType="h_big_type" class="form-control required" />
                        </div>
                    </div>
                </div>
            </div>
            <#form:hidden path="typeCode"/>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-sm-4" title="">
                            <span class="required ">*</span> ${text('排序号')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-8">
                            <#form:input path="treeSort" maxlength="8" class="form-control required digits"/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <label class="control-label col-sm-4" title="">
                            <span class="required hide">*</span> ${text('车型推荐')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-8">
                            <% var items = [{label:'推荐',value:'1'}]; %>
                            <#form:checkbox path="suggestStatus" items="${items}" itemLabel="label" itemValue="value" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="control-label col-sm-2" title="">
                            <span class="required hide">*</span> ${text('备注信息')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-10">
                            <#form:textarea path="remarks" rows="4" maxlength="500" class="form-control"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="control-label col-sm-2" title="">
                            <span class="required">*</span> ${text('车型图片')}：<i class="fa icon-question hide"></i></label>
                        <div class="col-sm-10">
                            <div class="custom-box">
                                <div class="custom-center-title">
                                    <ul class="custom-ul" id="image"></ul>
                                    <div id="showBtn" class="custom-center">
                                        <i class="fa fa-image custom-icon"></i>
                                        <div class="custom-file">
                                            <span>点击选择图片</span>
                                            <input type="file" accept="image/*" class="cover-file" id="carType">
                                        </div>
                                        <span class="custom-tips">最多可选择 1 张图片呦~</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="row">
                <div class="col-sm-offset-2 col-sm-10">
                    <% if (hasPermi('car:carType:edit')){ %>
                    <button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
                    <% } %>
                    <button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
                </div>
            </div>
        </div>
    </#form:form>
</div>
</div>
<% } %>
<script>
    let imgList = [],deleteInfo={carType:[]};
    //图片初始显示
    const carType = JSON.parse('${toJson(carType)}'),baseUrl='${baseUrl}';
    if (carType.imgUrl !== undefined && carType.imgUrl !== ''){
        imgList = [{imageUrl:carType.imgUrl}];
        imgShow(0,imgList);
    }
    // 上传图片
    $('#carType').on('change',function (e) {
        let img = e.target.files;
        const fix = (new Date()).getTime();
        for(let i=0;i<img.length;i++) {
            const name = (img[i].name).split('.');
            const file = new File([img[i]], 'carType_' + (fix+i) + '.' + name[1]);
            file.imgType='new';
            imgList=imgList.concat(file);
        }
        imgShow(0,imgList);
    });
    // 显示图片列表
    function imgShow(index,attr){
        let html = '';
        let windowURL = window.URL || window.webkitURL;
        for(let i =0;i<attr.length;i++) {
            console.log("attr[i].imgType",attr[i].imgType)
            if(attr[i].imgType){
                let dataURL = windowURL.createObjectURL(attr[i]);
                html +='<li class="custom-li">' +
                    '<div class="custom-trash" onclick="removeImg('+ index +','+i+')"><i class="fa fa-trash custom-del"></i></div>' +
                    '<div><img class="custom-img" src="'+dataURL+'"></div>' +
                    '<div class="custom-load">等待上传</div>' +
                    '</li>';
                windowURL.revokeObjectURL(attr[i]);
            }else {
                let dataURL = baseUrl+attr[i].imageUrl;
                html +='<li class="custom-li">' +
                    '<div class="custom-trash" onclick="removeImg('+ index +','+i+')"><i class="fa fa-trash custom-del"></i></div>' +
                    '<div><img class="custom-img" src="'+dataURL+'"></div>' +
                    '<div class="custom-success">已上传</div>' +
                    '</li>';
            }
        }
        if(index==0){
            if(attr.length>0){
                $('#showBtn').hide();
            }else{
                $('#showBtn').show();
            }
            $('#image').html(html);
        }
    }
    // 移除图片
    function removeImg(index,obj){
        js.confirm('确认删除该图片吗？', function(){
            if(index==0){
                $.each(imgList,(index)=>{
                    if(index==obj){
                        if(!imgList[obj].imgType){
                            const img = imgList[obj].imageUrl.split("/");
                            deleteInfo.carType.push(img[img.length-1])
                        }
                        imgList.splice(index,1);
                    }
                });
                imgShow(0,imgList);
            }
        });
    }


    $("#inputForm").validate({
        submitHandler: function(form){
            saveFileData();
        }
    });

    // 保存
    function saveFileData(formData) {
        if(imgList.length==0){
            js.showMessage('车型图片未上传！！');
            return;
        }

        if(imgList.length > 1){
            js.showMessage('最多只能上传1张图片！');
            return;
        }
        let paramsImg = new FormData();
        paramsImg.append("typeCode", $('#typeCode').val()); // 从表单获取
        paramsImg.append("treeName", $('#treeName').val()); // 从表单获取
        paramsImg.append("bigType", $('#bigType').val()); // 从表单获取
        paramsImg.append("treeSort", $('#treeSort').val()); // 从表单获取
        paramsImg.append("remarks", $('#remarks').val()); // 从表单获取
        paramsImg.append("delCarType", deleteInfo.carType.join(","));

        let flag = false;   // 判断是否选择推荐
        $('#suggestStatus input:checkbox:checked').each(function(i,v){
            paramsImg.append("suggestStatus", "1");
            flag = true;
        });
        if (!flag){
            paramsImg.append("suggestStatus", "");
        }

        for(let i=0;i<imgList.length;i++){
            if(imgList[i].imgType){
                paramsImg.append('files',imgList[i]);
            }
        }
        js.confirm('确认提交吗？', function(){
            $.ajax({
                url : '${ctx}/car/carType/save',
                type : 'POST',
                data : paramsImg,
                dataType : 'JSON',
                contentType:false,
                processData:false,
                mimeType:"multipart/form-data",
                success : function(data) {
                    js.showMessage(data.message);
                    if(data.result == 'true'){
                        js.closeCurrentTabPage(function(contentWindow){
                            contentWindow.page();
                        });
                    }
                },error: function(xhr, status, error) {
                    js.showMessage('保存失败：' + error);
                }
            });
        });
    }

</script>